import { getSize, getUserTypeValue, isDh } from "@/command/apiTool";
import Banner from "@/components/Banner";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import CardView from "@/components/CardView";
import DetailedInfo from "@/components/DetailedInfo";
import InfoCell from "@/components/InfoCell";
import { ILabelProps } from "@/components/Label/types";
import PageTitle from "@/components/PageTitle";
import RowView from "@/components/RowView";
import { defineComponent, reactive, ref } from "vue";
import { useRequest } from "./request";
import { Divider } from "vant";
import * as vant from "vant";
import { useRouter } from "vue-router";
import { toChatDetail } from "@/command/navigation";
const { showFailToast, showSuccessToast } = vant;

export default defineComponent({
  setup() {
    const router = useRouter();
    const { teamInfo, dhAction, xhAction } = useRequest();
    console.log(teamInfo);

    const render1 = () => {
      const data = {
        ...teamInfo.value,
        text: teamInfo.value.entityName,
        title: teamInfo.value.entityName,
        desc: teamInfo.value.address,
        phone: teamInfo.value.phone,
      };
      return (
        <CardView class={["!px-0 py-0"]}>
          <Banner url={teamInfo.value.logo} />
          <DetailedInfo
            {...data}
            distance={data.jl}
            text={data.text}
            class={"!rounded-[0px]"}
          />
        </CardView>
      );
    };
    //所用设备
    const render2 = () => {
      const sbList = teamInfo.value.sbList;
      return (
        <CardView
          radius={0}
          title="所用设备"
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push(`/deviceList?id=${teamInfo.value.id}`)}
            >
              查看更多
            </div>
          )}
        >
          {sbList.map((e) => {
            const data = {
              text: e.remark,
              title: e.name,
              src: e.img,
            };
            return (
              <div onClick={() => router.push(`/deviceDetails?id=${e.id}`)}>
                <InfoCell {...data} class="seed-item" />
                <Divider />
              </div>
            );
          })}
        </CardView>
      );
    };
    //所用农资
    const render3 = () => {
      const agriculturalList = teamInfo.value.agriculturalList;

      return (
        <CardView
          radius={0}
          title="所用农资"
          right={() => (
            <div
              class="blue-text"
              onClick={() =>
                router.push(`/farmProductsUseDh?id=${teamInfo.value.id}`)
              }
            >
              查看更多
            </div>
          )}
        >
          {agriculturalList.map((e: any) => {
            const data = {
              text: e.comment,
              title: e.name,
              src: e.img,
            };

            return (
              <div
                onClick={() => router.push(`/farmProductDetailXh?id=${e.id}`)}
              >
                <InfoCell {...data} class="seed-item" />
                <Divider />
              </div>
            );
          })}
        </CardView>
      );
    };
    //种植品种
    const render4 = () => {
      const plantList = teamInfo.value.productList;
      return (
        <CardView title="种植品种" radius={0}>
          <RowView class="!items-start flex  flex-wrap">
            {plantList.map((e: any) => {
              return (
                <div
                  class={"mr-10 flex flex-col items-center justify-center"}
                  onClick={() => {
                    router.push(`/varietyDetails?id=${e.id}`);
                  }}
                >
                  <img
                    src={e.img}
                    class={["w-[104px] h-[75px] rounded-5 mb-[6px]"]}
                  />
                  {e.name}
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };
    const render5 = () => {
      const buttons1: IButtonGroupViewData[] = [
        {
          display: true,
          text: "咨询小户",
          type: "default",
          plain: true,
          childClass: "!h-[40px] !w-full",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
            margin: "0 4px",
          },
          toChatData: {
            to: teamInfo.value.phone,
            name: teamInfo.value.entityName,
          },
        },
        {
          display:
            teamInfo.value.teamFlag == "1" && teamInfo.value.userFlag == "1",
          text: "取消结队",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          style: {
            margin: "0 4px",
          },
          onClick: () => {
            dhAction(teamInfo.value, "2");
          },
        },
        {
          display: teamInfo.value.teamFlag == "0",
          text: "邀请结队",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          style: {
            margin: "0 4px",
          },
          onClick: () => {
            dhAction(teamInfo.value, "1");
          },
        },
      ].filter((e) => e.display) as IButtonGroupViewData[];
      const buttons2: IButtonGroupViewData[] = [
        {
          display: true,
          text: "咨询大户",
          type: "default",
          plain: true,
          childClass: "!h-[40px] !w-full",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
            margin: "0 4px",
          },
          toChatData: {
            to: teamInfo.value.phone,
            name: teamInfo.value.entityName,
          },
        },
        {
          display:
            teamInfo.value.teamFlag == "1" && teamInfo.value.userFlag == "1",
          text: "取消结队",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          style: {
            margin: "0 4px",
          },
          onClick: () => {
            xhAction(teamInfo.value, "2");
          },
        },
        {
          display: teamInfo.value.teamFlag == "0",
          text: "邀请结队",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          style: {
            margin: "0 4px",
          },
          onClick: () => {
            xhAction(teamInfo.value, "1");
          },
        },
      ].filter((e) => e.display) as IButtonGroupViewData[];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px] z-50"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f5f5f5",
          }}
        >
          <ButtonGroupView
            data={getUserTypeValue() == "dh" ? buttons1 : buttons2}
          />
        </div>
      );
    };

    return () => {
      return (
        <PageTitle
          title={getUserTypeValue() == "dh" ? "小户详情" : "大户详情"}
          childClass="!p-[0px] m-child-top-10 !pb-[50px]"
        >
          {render1()}
          {render4()}
          {getUserTypeValue() == "xh" && render2()}
          {getUserTypeValue() == "xh" && render3()}
          {render5()}
        </PageTitle>
      );
    };
  },
});
